/**
* 设备详情 设备限速
*/ 
<template>
  <div class="main">
    <div class="top">
        <div>
            <span>限速开关：</span>
            <span>打开</span>
        </div>
        <div>
            <span>限速状态：</span>
            <span>未限速</span>
        </div>
        <div>
            <span>操作：</span>
            <el-button type="primary" size="mini">限速设置</el-button>
            <el-button type="primary" size="mini">解除限速</el-button>
        </div>
    </div>

    <div class="middle">
        <div class="block">
            <div class="line">
                <div class="name">策略类型</div>
                <div class="data">----</div>
                <div class="name">策略类型</div>
                <div class="data">----</div>
                <div class="name">策略类型</div>
                <div class="data">----</div>
                <div class="name">策略类型</div>
                <div class="data">----</div>
            </div>
        </div>
        <div class="block">
            <div class="line">
                <div class="name">策略类型</div>
                <div class="data">----</div>
                <div class="name">策略类型</div>
                <div class="data">----</div>
                <div class="name">策略类型</div>
                <div class="data">----</div>
                <div class="name">策略类型</div>
                <div class="data">----</div>
            </div>
        </div>
        <div class="block">
            <div class="line">
                <div class="name">策略类型</div>
                <div class="data">----</div>
                <div class="name">策略类型</div>
                <div class="data">----</div>
                <div class="name">策略类型</div>
                <div class="data">----</div>
                <div class="name">策略类型</div>
                <div class="data">----</div>
            </div>
        </div>
    </div>

    <el-table size="small" :data="listData"  highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column align="center"  prop="SN" label="设备SN" width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="type" label="限速类型" width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="Speed" label="限速网速（KB/s）" width="140" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="state" label="状态" width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="StartTime" label="开始时间" width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="EndTime" label="结束时间" width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="CreatedBy" label="创建人" width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="CreatedTime" label="创建时间" width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="UpdatedBy" label="更新人" width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="UpdatedTime" label="更新时间" width="100" show-overflow-tooltip>
        </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
    name:'speedLimit',
    data() {
        return {
            loading: false,
            listData:[],
        };
    },
    methods: {
        getdata(){
           let res = {
                code: 0,
                msg: null,
                count: 23,
                data:[
                    {
                        SN:'56132044000070',
                        type:'人工限速',
                        Speed:'128',
                        state:'已失效',
                        StartTime:'2023-10-19 00:00:00',
                        EndTime:'2023-10-21 00:00:00',
                        CreatedBy:'小半',
                        CreatedTime:'2023-10-19 21:11:56',
                        UpdatedBy:'',
                        UpdatedTime:'2023-10-19 21:11:56',
                    },
                ]
            }
            this.listData =  res.data;
        }
    },
    mounted () {
        this.getdata();
    }
}
</script>

<style lang="scss" scoped>
    .main{
        .top{
            margin-top: 5px;
            div{
                display: inline-block;
                width: 32%;
                span{
                    font-size: 14px;
                    color: rgb(160, 160, 160);
                }
                .el-button{
                    margin-right: 3px;
                }
            }
        }
        .middle{
            width: 100%;
            .block{
                width: 33%;
                display: inline-block;
                .line{
                    .name{
                        width: 48%;
                        text-align: center;
                        background-color: #F3F6FC;
                        display: inline-block;
                        font-size: 14px;
                        padding-top: 8px;
                        padding-bottom: 8px;
                        border-bottom: 0.5px solid #e6ecfa;
                    }
                    .data{
                         width: 48%;
                        text-align: center;
                        display: inline-block;
                        font-size: 14px;
                        padding-top: 8px;
                        padding-bottom: 8px;
                        border-bottom: 0.5px solid #e6ecfa;
                    }
                }
            }
        }
    }
</style>